<style lang="scss" scoped>
.doc {
  background: #f3f1f1;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.83rem;
  font-weight: 400;
  background-color: rgba(243, 220, 169, 0.849);
  color: rgba(86, 62, 7, 0.849);
  padding-left: 1.5rem;
  position: relative;

  span {
    position: absolute;
    right: 1rem;
  }
}

.zhuye {
  width: 95%;
  height: 13rem;
  padding: 0.625rem;
  background: white;
  margin: 0.625rem;

  .top {
    width: 100%;
    display: flex;

    .left {
      width: 77%;

      .name {
        font-size: 0.88rem;
        font-weight: 400;
      }

      .hospital {
        font-size: 0.88rem;
        font-weight: 400;
        margin: 0.5rem 0;

        span {
          font-size: 1rem;
          color: #ccc;
        }
      }

      .pingfen {
        display: flex;
        height: 1.25rem;
        line-height: 1.25rem;

        span {
          display: flex;
          margin-right: 1rem;

          p {
            font-size: 0.88rem;
            font-weight: 400;
          }

          img {
            width: 0.9375rem;
            height: 0.9375rem;
          }
        }

        .span::after {
          width: 0.5rem;
          height: 0.5rem;
          margin-top: 0.3rem;
          border-right: 0.0625rem solid #ccc;
          content: '|';
          color: transparent;
        }
      }
    }

    .right {
      width: 5rem;

      img {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        border: 0.0625rem solid #ccc;
      }

      .gz {
        width: 3.9rem;
        background-color: rgb(213, 247, 222);
        color: rgb(27, 211, 150);
        font-size: 0.9rem;
        text-align: center;
        border-radius: 1.5rem;
        margin-left: 0.6rem;
      }
    }
  }

  .bottom {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 1rem;
    z-index: 9999;
    div {
      font-size: 0.88rem;
      margin: 0.3em;
      background: #e4eef4;
      color: rgb(44, 116, 224);
      padding: 0.3rem;
    }
  }
}

.p1 {
  display: flex;
  justify-content: space-around;

  span {
    color: #ccc;
    font-size: 0.88rem;
  }
}

.grid {
  display: flex;
  text-align: center;

  dl {
    padding: 1rem 0.625rem;
    background: white;
    border-radius: 0.3rem;

    dt {
      img {
        width: 2.5rem;
        height: 1.875rem;
      }
    }

    dd {
      .wenzhen {
        color: #ccc;
      }

      .jg {
        color: #ccc;
        font-size: 0.88rem;
      }
    }
  }
}

.wenzi {
  margin: 1rem 0.5rem;
  width: 95%;
  padding: 1rem 0.5rem;
  background: white;
}

.goodat {
  background: white;
  margin: 1rem 0.5rem;
  width: 95%;
  padding: 0.5rem;
  border-radius: 0.5rem;

  h3 {
    margin-bottom: 1rem;
  }

  div {
    // width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
  }
}

.pingjia {
  background: white;
  margin: 1rem 0.5rem;
  width: 95%;
  padding: 0.5rem;
  border-radius: 0.5rem;

  h3 {
    span {
      margin-left: 230px;
      font-weight: normal;
      font-size: 14px;
      color: #a09e9e;
    }
  }

  .fenlei {
    width: 75%;
    height: 6rem;
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem;

    div {
      padding: 0.5rem;
      font-size: 0.89rem;
      background: #f1eeee;
      margin: 0.3em;
    }
  }

  .userpingjia {
    div {
      h4 {
        span {
          font-weight: normal;
        }

        .tu {
          background: #e4eef4;
          color: rgb(44, 116, 224);
          font-size: 0.8rem;
          margin-right: 0.3rem;
        }

        .wen {
          background: #f3e4a3;
          color: rgb(242, 45, 6);
          font-size: 0.8rem;
        }

        .date {
          position: absolute;
          right: 1.5rem;
          font-size: 0.85rem;
          color: #ccc;
        }
      }

      p {
        display: flex;
        flex-wrap: wrap;

        span {
          display: flex;
          margin: 0.2rem 0.6rem;
          color: #ccc;
        }

        .span::after {
          width: 1rem;
          height: 0.7rem;
          margin-top: 0.3rem;
          border-right: 0.0625rem solid #ccc;
          content: '|';
          color: transparent;
        }
      }

      .div {
        width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0.5rem 0;
      }

      .wenti {
        padding: 0.6rem;
        background: #ebe8e8;
        color: #a09e9e;
        font-size: 0.93rem;
      }
    }
  }
}

.di {
  width: 100%;
  background-color: white;
  height: 5rem;
  position: fixed;
  bottom: 0;
  text-align: center;

  button {
    width: 80%;
    height: 3rem;
    border-radius: 1.5rem;
    border: none;
    position: absolute;
    right: 20px;
    bottom: 10px;
    background: #31cd2c;
    color: white;
    z-index: 99999;
  }
}

.active {
  border: 1px solid #31cd2c;
}
</style>
<template>
  <div>
    <div class="doc">
      <p class="header">已通过实名认证 ><span>执业资质已审核通过</span></p>
      <div class="zhuye">
        <div class="top">
          <div class="left">
            <h2>{{ doctor.name }}</h2>
            <p class="name">{{ doctor.clinic_name }} {{ doctor.title }}</p>
            <p class="hospital">
              {{ doctor.hospital_name }}
              <span>></span>
            </p>
            <p class="pingfen">
              <span class="span">
                <h3>{{ doctor.service_data_list[0].descrip }}</h3>
                <img :src="doctor.service_data_list[0].icon" alt="" />
              </span>
              <span class="span">
                <p>{{ doctor.service_data_list[1].name }}</p>
                <h3>{{ doctor.service_data_list[1].descrip }}</h3>
              </span>
              <span>
                <p>{{ doctor.service_data_list[2].name }}</p>
                <h3>{{ doctor.service_data_list[2].descrip }}</h3>
              </span>
            </p>
          </div>
          <div class="right">
            <img :src="doctor.image" alt="" />
            <div @click="gz(item)" class="gz">
              {{ flag ? '取消关注' : '+关注' }}
            </div>
          </div>
        </div>
        <div class="bottom">
          <div v-for="(item, index) in doctor.new_tags" :key="index">
            {{ item.name }}
          </div>
        </div>
      </div>
      <p class="p1">
        <span>保证医生真实</span>
        <span>未使用随时退</span>
        <span>不满意可申诉</span>
      </p>
      <div class="grid">
        <dl
          @click="tuwen(index)"
          :class="active === index ? 'active' : ''"
          v-for="(item, index) in consult"
          :key="index"
        >
          <dt>
            <img :src="item.img" alt="" />
          </dt>
          <dd>
            <p>{{ item.title }}</p>
            <p class="jg">{{ item.price }}</p>
          </dd>
        </dl>
        <!-- <div v-for="">

                </div> -->
      </div>
      <div class="wenzi">
        <div v-for="(item, index) in word" :key="index">
          <p v-if="index === active">{{ item.title }}</p>
        </div>
      </div>
      <div class="goodat">
        <h3>擅长与简介</h3>
        <div>
          {{ doctor.goodat }}
        </div>
      </div>
      <div class="pingjia">
        <h3>
          患者评价<span @click="checkAll(item)">查看全部<van-icon name="arrow" /> </span>
        </h3>
        <div class="fenlei">
          <div v-for="(item, index) in doctor.assessment.slice(1, 5)" :key="index">
            {{ item.name }}
            <!-- <span>({{ }})</span> -->
          </div>
        </div>
        <div class="userpingjia">
          <div>
            <h4>
              173*******1
              <span class="tu">图文</span>
              <span class="wen">满意</span>
              <span class="date">3月4日</span>
            </h4>
            <p>
              <span class="span"> 耐心细致 </span>
              <span class="span"> 讲解很清楚 </span>
              <span> 回复很及时 </span>
            </p>
            <div class="div">张医生很好,很有耐心,爱心,是个值得信赖的好医生！</div>
            <div class="wenti">问题描述：张医生，您好，我之前咨询过您。(女，31岁)</div>
          </div>
          <div>
            <h4>
              180*******6
              <span class="tu">图文</span>
              <span class="wen">满意</span>
              <span class="date">2月17日</span>
            </h4>
            <p>
              <span class="span"> 耐心细致 </span>
              <span class="span"> 讲解很清楚 </span>
              <span class="span"> 回复很及时 </span>
              <span> 建议很有帮助 </span>
            </p>
            <div class="div">医生很好,建议很有帮助,很有耐心,讲解详细，谢谢！</div>
            <div class="wenti">问题描述:一直不孕,不知道什么原因,末次月经是上个月11号(女,26岁)</div>
          </div>
        </div>
      </div>
    </div>
    <div class="di">
      <img
        src="../../assets//xin.jpg"
        alt=""
        style="position: absolute; left: 10px; bottom: 20px"
        @click="Toai(item)"
      />
      <p style="position: absolute; left: 15px; bottom: 0px; font-size: 14px">送爱心</p>
      <button>图文咨询(￥20元/次)</button>

      <div v-for="(item, index) in btn" :key="index">
        <button v-if="index === active" @click="handleClick(index)">
          {{ item.title }}{{ item.price }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import image1 from '@/assets/img/zixun3.png'
import image2 from '@/assets/img/zixun1.png'
import image3 from '@/assets/img/video_03.png'
import image4 from '@/assets/img/zixun2.png'
import axios from 'axios'
const route = useRoute()
const router = useRouter()
const myDoctor = ref<any>(JSON.parse(localStorage.getItem('doctor') || '[]'))
const flag = ref(false)
const doctor = ref<any>([])

onMounted(() => {})

console.log(doctor.value)

const list = ref([])
const getlist = async () => {
  await axios
    .get('/addres/ChunYuperson')
    .then((res) => {
      console.log(res)
      list.value = res.data.data
      console.log(list.value)
    })
    .catch((err) => {
      console.log(err)
    })
}
getlist()

const active = ref(0)
const consult = ref([
  {
    title: '图文咨询',
    price: '￥20元/次',
    img: image1,
    flag: true,
  },
  {
    title: '电话咨询',
    price: '40元/次',
    img: image2,
    flag: false,
  },
  {
    title: '视频咨询',
    price: '￥80元/次',
    img: image3,
    flag: false,
  },
  {
    title: '预约就诊',
    price: '暂未开通',
    img: image4,
    flag: false,
  },
])
const word = ref([
  {
    title: '通过文字、图片、语音与医生一对一在线沟通',
    flag: true,
  },
  {
    title: '通过电话与医生进行选定时长的沟通，可添加病情资料与图片',
    flag: false,
  },
  {
    title: '与医生面对面视频资讯，问诊更放心',
    flag: false,
  },
  {
    title: '预约就诊',
    price: '暂未开通',
  },
])
const btn = ref([
  {
    title: '图文咨询',
    price: '￥29元/次',
  },
  {
    title: '电话咨询',
    price: '￥40元/次',
  },
  {
    title: '视频咨询',
    price: '￥86元/次',
  },
  {
    title: '预约就诊',
    price: '暂未开通',
  },
])

const checkAll = (item) => {
  router.push({
    path: '/PatientEvaluation',
    query: {
      item: JSON.stringify(item),
    },
  })
}

const gz = (item: any) => {
  console.log(item.doctor_info.doctor_id)
  flag.value = !flag.value
  const items = myDoctor.value.find(
    (items: any) => items.doctor_info.doctor_id !== item.doctor_info.doctor_id,
  )
  console.log(items)

  if (item) {
    myDoctor.value.push([{ ...item, ...myDoctor.value }])
    console.log(myDoctor.value)
  }
  localStorage.setItem('doctor', JSON.stringify(myDoctor.value))

  // if (!flag.value) {
  //     console.log('取消关注');

  // } else {
  //     console.log('关注');
  //     let arrayString = JSON.stringify(doctor.value);
  //     localStorage.setItem('doctor', arrayString);
  //     let storedArrayString = localStorage.getItem("myFruitArray");
  //     // const list = localStorage.setItem('doctor', JSON.stringify(item.id))
  // }

  console.log(items)
}

const tuwen = (index) => {
  active.value = index
}
const Toai = (item: any) => {
  console.log(item)
  router.push({
    path: '/Love',
    query: {
      item: JSON.stringify(doctor.value),
    },
  })
}

const handleClick = (index) => {
  if (index == 0) {
    router.push({ path: '/word' })
  } else if (index == 1) {
    router.push({
      path: '/phone',
      query: {
        item: JSON.stringify(doctor.value),
      },
    })
  } else if (index == 2) {
    router.push({ path: '/video' })
  }
}
// 获取数据
const item = JSON.parse(route.query.item)
console.log(item)

doctor.value = item
</script>
